<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>我的兑换券</title>
    <link href="/css/mui.min.css" rel="stylesheet"/>
    <style>

        /*标题样式*/
        .mui-title {
            font-weight: bold;
            color: #333333;
        }

        .mui-bar {
            background-color: #f5f5f5;
        }

        .mui-bar-nav {
            top: 0;
            -webkit-box-shadow: 0 1px 6px #d5d7dc;
            box-shadow: 0 1px 6px #d5d7dc;
        }

        /*回退按钮样式*/
        a {
            color: #ffffff;
        }

        /*整体背景样式*/
        body {
            background-color: #f9f9f9;
        }

        /*内容背景色*/
        .mui-content {
            background-color: #f9f9f9;
        }

        /*输入框DIV样式*/
        .mui-input-group .mui-input-row {
            margin: 0% 4%;
            width: 96%;
            height: 44.5px;
        }

        /*输入框标题样式*/
        .mui-input-row label {
            padding: 4.18% 0;
            font-size: 14px;
            width: 15%
        }

        .mui-table-view .mui-table-view-cell {
            font-size: 14px;
            padding: 3.8% 4%;;
            color: #333333;
        }

        .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {
            float: left;
        }

        /*输入框样式*/
        .mui-input-row input {
            margin-left: 0%;
            padding: 5% 0;
            font-size: 14px;
        }

        /*输入框样式*/
        .mui-input-row span {
            display: block;
            margin-left: 0%;
            padding: 3.2% 0;
            font-size: 14px;
        }

        .mui-input-group .mui-input-row:after {
            left: 0px;
        }

        /*确认按钮样式*/
        .mui-button-row {
            margin-top: 8.03%;
        / / 28.5 px;
            padding: 0px 0px;
        }

        .mui-btn {
            width: 180px;
            height: 40px;
        }

        /* v2.0 */

        /*表格前线条样式*/
        .mui-table-view:before {
            /*height: 1px;*/
            position: static;
        }

        .mui-navigate-right:after {
            content: '';
            position: static;
        }

        .mui-media-body p {
            font-size: 15px;
            color: #333333;
            margin: 0px;
            padding: 0px;
            line-height: 15px;
        }

        /*li的上下划线*/
        .mui-table-view:before {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #d7d6dc;
        }

        .mui-table-view:before.mui-table-view:after {
            background-color: #d7d6dc;
        }

        .mui-table-view-cell > .mui-slider-right > .mui-btn:after {
            width: 0;
        }

        .mui-pull-bottom-pocket {
            visibility: visible;
        }

    </style>

</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #494A5F;">
    <!--<a class="mui-back mui-icon mui-icon-left-nav mui-pull-left" id="back"></a>-->
    <h1 class="mui-title" style="color: #ffffff;font-size: 17px;">我的兑换券</h1>
</header>
<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
    <div class="mui-scroll">
        <ul id="couponList" class="mui-table-view mui-table-view-chevron"
            style="background-color: #f9f9f9;margin-top: 2.78%;">
        </ul>
    </div>
</div>
</body>
<script src="/js/mui.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/mui.pullToRefresh.js"></script>
<script src="/js/mui.pullToRefresh.material.js"></script>
<script>

    /**
     * 全局变量
     */

    /**
     * 初始化
     */
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                height: 50,//可选.默认50.触发上拉加载拖动距离
                auto: false,//可选,默认false.自动上拉加载一次
                contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: pullupRefresh
            }
        }
    });


    mui.ready(function () {

        var userid = sessionStorage.getItem("userid");
        if (userid) {
        } else {
            mui.openWindow({
                url: app.ip + 'login.html',
                id: 'login'
            });
        }

        //阻尼系数
        var deceleration = mui.os.ios?0.003:0.0009;
        mui('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration:deceleration
        });


//        mui('#scroll').scroll({
//            indicators: true //是否显示滚动条
//        });

        if (mui.os.plus) {
            mui.plusReady(function () {
                setTimeout(function () {
                    mui('#pullrefresh').pullRefresh().pullupLoading();
                }, 1000);
            });
        } else {
            mui.ready(function () {
                mui('#pullrefresh').pullRefresh().pullupLoading();
            });
        }

        //快速回滚到该区域顶部
        mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100);//100毫秒滚动到顶

//        mui('#back')[0].addEventListener('tap', function (e) {
//            e.preventDefault();
//
//            mui.openWindow({
//                url: app.ip + 'my/my.html',
//                id: 'my'
//            });
//
//        });


        //监听tap事件,点击立即跳转到对应的兑换码详情页面
        mui('#couponList').on('tap', '.mui-table-view-cell', function (e) {
            e.preventDefault();
            var couponId = this.getAttribute('data_sonShopId');
//			//打开兑换码详情页面,传入对应的值／
            mui.openWindow({
                url: app.ip + 'my/my_coupon_detail.html?' + couponId +"",
                id: 'couponDetail'
            });
        });

    });


    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        var userid = sessionStorage.getItem("userid");
        if (userid) {
        } else {
            mui.openWindow({
                url: app.ip + 'login.html',
                id: 'login'
            });
        }
        setTimeout(function () {
            app.loadData('coupon/pageList', {
                        "pageNum": "" + ++count,
                        "pageSize": "10",
                        "userid": "" + userid
                    },
                    function (result) {
                        var couponList = result.list;
                        if (result.pages < count) {
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                        } else {
                            packagecoupon(couponList);
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

                        }
                    },
                    function (xhr, type, error) {
                        mui.alert('网络异常！');
                    });
        }, 10);
    }


    function packagecoupon(couponList) {
        if (couponList) {
            var ul = document.querySelector('#couponList');
            for (var i = 0; i < couponList.length; i++) {
                var coupon = couponList[i];
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell mui-media';
                li.style = 'height: 84px;padding: 10px 0px 10px 12px;margin-top: 0px;background-color: white;';
                var content1 = '<div class="mui-table">' +
                        '<div class="mui-table-cell mui-col-xs-8">' +
                        '<h5 class="mui-ellipsis">兑换券：' + coupon.card + '</h5>' +
                        '<p>商品名：' + coupon.productName + '</p>' +
                        '<p class="mui-h6 mui-ellipsis">下单时间：' + coupon.createTime + '</p>' +
                        '</div>' +
                        '<div class="mui-table-cell mui-col-xs-4">' +
                        '<p class="mui-h5">价格：' + coupon.price / 100 + '元</p>';



                var content2 = '';
                if(coupon.status==0){
                    content2=  '<p class="mui-h5">未核销</p>';
                }else if(coupon.status==1){
                    content2=  '<p class="mui-h5">已核销</p>';
                }else if(coupon.status==2){
                    content2=  '<p class="mui-h5">已作废</p>';
                }else{

                }


                var content3 = '</div>' +
                        '</div>';
                var content = content1 + content2 + content3;
                li.innerHTML = content;
                li.setAttribute('data_sonShopId', coupon.card);
                ul.appendChild(li);
            }
        }
    }


</script>
</html>